<template>
  <div class="complaint">
    <div class="complaint_main">
      <div class="com_main_title mb10">投诉内容:</div>
      <textarea class="content_box" :value="content" maxlength="100" placeholder="请填写投诉内容" />
    </div>
    <div class="complaint_pic">
      <div class="pic_title mb10">图片证据:</div>
      <van-uploader
        class="upload_box"
        :file-list="fileList"
        multiple
        max-count="5"
        :max-size="maxSize"
        use-before-read
        @before-read="beforeRead"
        @after-read="afterRead"
        @delete="deleteImg"
      />
    </div>
    <div class="com_tips">
      <div class="tips_tit mb10">小提示:</div>
      <div class="tips_tit_main">
        <div>必须上传真实有效的证据截图,如:透露微信/诈骗/侮辱等</div>
        <div>不得发布含有违法违规,低俗,侮辱,营销等内容</div>
      </div>
    </div>
    <div class="submit_btn" @click="complaint">确定投诉</div>
  </div>
</template>
<script setup>
  import {ref,reactive} from 'vue'
  const content = ref('');
  const maxSize = ref(1024*1024*5) // 5M
  const fileList = reactive([])
  const beforeRead = event=>{
    const { file, callback } = event.detail;
    callback(file.type === 'image');
    console.log(file,'========')
  }
  const afterRead = (event)=>{
    const { file, callback } = event.detail;
    uni.uploadFile({
      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
      filePath: file.url,
      name: 'file',
      formData: { user: 'test' },
      success(res) {
        // 上传完成需要更新 fileList
        fileList.push({ ...file, url: res.data });
       
      },
    });
  }
  const deleteImg = event => {
    const {index } = event.detail
  }
  const complaint = () =>{

  }
</script>
<style scoped lang="scss">
.mb10{
  margin-bottom: 10px;
}
.complaint{
  background-color: #f5f5f5;
  padding: 30rpx;
  .complaint_main{
    margin-bottom: 20rpx;
    .content_box{
      background-color: #fff;
      border:1px solid #eee;
      background-color: #fff;
      border-radius: 4px;
      width: 100%;
      height: 100px;
      padding: 10px;
      box-sizing: border-box;
    }
  }
  .com_tips{
    .tips_tit{
      color: #333;
      font-size: 20rpx;
      line-height: 30rpx;
    }
    .tips_tit_main{
      color: #333;
      font-size: 20rpx;
      line-height: 30rpx;
    }
  }
 
  .submit_btn{
    margin-top: 10px;
    width: 100%;
    height: 40px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background-color: #1c6ad7;
    color: #fff;
  }
}
</style>
<style lang="scss">
 .upload_box{
    .van-uploader {
      .van-uploader__wrapper{
        .van-uploader__upload{
          background-color: #ccc!important;
        }
      }
    }
  }
</style>